.gradient-background {
  width: 3952px;
  height: 186px;
  position: relative;
  box-sizing: border-box;
  background: url(http://localhost:8085/static/images/shouye/顶部背景.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  
  // 响应式适配 - 基准分辨率为3952x1248
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }
  
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }
  
  @media screen and (min-width: 5120px) {
    transform: scale(1.2955); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background: linear-gradient(
    //   to right,
    //   rgba(0, 0, 0, 0.8) 0%,
    //   rgba(0, 0, 0, 0.5) 10%,
    //   rgba(0, 0, 0, 0.2) 20%,
    //   rgba(0, 0, 0, 0) 30%,
    //   rgba(0, 0, 0, 0) 70%,
    //   rgba(0, 0, 0, 0.2) 80%,
    //   rgba(0, 0, 0, 0.5) 90%,
    //   rgba(0, 0, 0, 0.8) 100%
    // );
    background: url(http://localhost:8085/static/images/shouye/顶部背景.png);
    pointer-events: none;
  }
}

// 响应式支持 - 已统一到主类中，此部分废弃

// 设计模式样式
[data-component-name="Background"] {
  &.selected {
    outline: 2px solid #0099ff;
    outline-offset: 2px;
  }
  
  &:hover {
    cursor: pointer;
  }
}